<template>
  <view>
    <view class="remark-view">
      <view style="line-height: 6rem;" class="popup-title">
        订单打折/减免
      </view>
      <view class="pop-content">
        <view style="position: relative;">
          <u-input :disabled="true" v-model="disaccountNumber" inputAlign="right" type="text"
            :customStyle="{fontSize:'2.4rem', border:'1px solid rgba(56, 192, 158, 1) !important',padding:'0rem 7rem 0rem 2rem  !important',height:'9rem !important'}"
            placeholder="请输入优惠力度">

            <template slot="prefix">
              <view style="display: flex;">
                <view class="margin-right">
                  <u-button @click="clickFn('disaccount')"
                    :customStyle="type == 'disaccount'?{height:'5.4rem !important',background:'rgba(56, 192, 158, 1) !important',color:'white !important','font-size':'2.4rem'}:{height:'5.4rem !important','font-size':'2.4rem'}">
                    打折

                  </u-button>
                </view>
                <view>
                  <u-button @click="clickFn('jm')"
                    :customStyle="type == 'jm'?{height:'5.4rem !important',background:'rgba(56, 192, 158, 1) !important',color:'white !important','font-size':'2.4rem'}:{height:'5.4rem !important','font-size':'2.4rem'}">
                    减免
                  </u-button>
                </view>
              </view>

            </template>

          </u-input>
          <view v-if="type == 'disaccount'"
            style="height:9rem;position: absolute;right: 3rem;bottom: 0;font-size: 3rem;height: 9rem;display: flex;align-items: center;">
            %
          </view>

        </view>


        <view class="disaccountText">
          <!-- 打折后 <text class="red">¥20</text> 不包含服务员/商家后台设置不允许打折的商品 -->
        </view>

        <view class="button-content-cal">

          <view class="button-row">

            <view @click="handleNumberFn(item)" v-for="(item,index) in handleNumber.one"
              :class="index == handleNumber.one.length - 1?'noMarginBottom fake-button':'fake-button'">
              {{item.name}}
            </view>

          </view>

          <view class="button-row">

            <view :style="item.value == `.`?`font-size:2rem`:``" @click="handleNumberFn(item)"
              v-for="(item,index) in handleNumber.two"
              :class="index == handleNumber.one.length - 1?'noMarginBottom fake-button':'fake-button'">
              {{item.name}}
            </view>

          </view>

          <view class="button-row">

            <view @click="handleNumberFn(item)" v-for="(item,index) in handleNumber.three"
              :class="index == handleNumber.one.length - 1?'noMarginBottom fake-button':'fake-button'">
              {{item.name}}
            </view>
          </view>

          <view class="button-row">

            <view @click="handleNumberFn(item)" v-for="(item,index) in handleNumber.four" class="fake-button noMargin">
              {{item.name}}
            </view>

            <view @click="clear" style="flex: 1;" class="fake-button noMargin">
              清空
            </view>

            <view @click="cut"  class="delete-button noMargin" style="height: 6rem;">
              <u-icon name="backspace" color="#303133" size="30"></u-icon>
              <!-- <image class="delete-icon" src="/static/images/components/manual-disaccount/static/delete.png" /> -->
            </view>
          </view>

        </view>

        <view class="title-row">
          打折原因 <text class="red">*</text>
        </view>

        <view class="button-content">
          <view v-if="list.length > 0" @click="clickDisaccountTag(item)" v-for="(item,index) in list"
            :class="item.reason_no == disaccountTag.reason_no?`bottom-button isActive`:`bottom-button`">
            {{item.discount_reason}}
          </view>

        </view>

        <view @click="submit" class="submit-button">
          确定
        </view>

      </view>


    </view>


  </view>
</template>

<script>
  import Big from 'big.js';
  export default {
    props: {
      noPayAmount: {
        type: [Number, String]
      },
      billData: {
        type: Object
      },
      billResult: {
        type: Object
      }
    },
    computed: {
      handleNumber() {

        let item;
        if (this.type == 'disaccount') {
          item = {
            name: '',
            value: "not"
          };
        } else {
          item = {
            name: '.',
            value: "."
          }
        }
        let handleNumber = {
          one: [{
              name: '60%',
              value: 60,
              isType: '%',
            },
            {
              name: '1',
              value: 1
            },
            {
              name: '4',
              value: 4
            },
            {
              name: '7',
              value: 7
            },
            {
              name: '',
              value: "not"
            },
          ],
          two: [{
              name: '70%',
              value: 70,
              isType: '%'

            },
            {
              name: '2',
              value: 2
            },
            {
              name: '5',
              value: 5
            },
            {
              name: '8',
              value: 8
            },
            {
              name: '0',
              value: "0"
            },
          ],
          three: [{
              name: '80%',
              value: 80,
              isType: '%'

            },
            {
              name: '3',
              value: 3
            },
            {
              name: '6',
              value: 6
            },
            {
              name: '9',
              value: 9
            },
            {
              ...item
            }


            // {
            // 	name: '.',
            // 	value: "."
            // },
          ],
          four: [{
            name: '90%',
            value: 90,
            isType: '%'

          }, ]
        }

        if (this.type != 'disaccount') {
          for (let key in handleNumber) {
            handleNumber[key].splice(0, 1);
          }
        }
        return handleNumber;
      }
    },
    data() {
      return {
        isDetail: false,
        disaccountTag: false,
        disaccountNumber: '100',
        type: 'disaccount',
        list: [],
      }
    },
    methods: {
      clickFn(data) {
        this.type = data;
        if (this.type == 'disaccount') {
          this.disaccountNumber = 100;
        } else {
          this.disaccountNumber = ''
        }
      },
      clear() {
        if (this.type == 'disaccount') {
          this.disaccountNumber = '100'
        } else {
          this.disaccountNumber = ''
        }
      },
      isNumber(val) {
        var regPos = /^\d+(\.\d+)?$/;
        if (regPos.test(val)) {
          return true;
        } else {
          return false;
        }
      },
      formatter(val) {
        return val;
      },
      submit() {
        if (!this.disaccountTag?.reason_no) {
          uni.showToast({
            title: '请选择打折原因',
            icon: 'none'
          })
          return
        }
        let boolean = this.isNumber(this.disaccountNumber);
        let type;
        let passNumber;
        if (boolean) {
          if (this.type == 'disaccount') {
            type = '打折';
            passNumber = Number(new Big(this.disaccountNumber || 0).div(100)).toFixed(2);
          } else {
            type = '减免';
            passNumber = Number(this.disaccountNumber).toFixed(2);
            if (this.disaccountNumber > this.billResult?._order_amount) {
              uni.showToast({
                title: '减免金额不能超出应付金额!',
                icon: "none"
              })
              this.disaccountNumber = this.billResult?._order_amount
              return
            }
          }

          let obj = {
            "discount_type": '不优惠',
            "discount_mode": type,
            "discount_reduction_amount": passNumber,
            "discount_reason": this.disaccountTag.reason_no,
          }

          let data = {
            disaccountTag: this.disaccountTag,
            disaccountNumber: this.disaccountNumber,
            type: this.type,
            discount_mode: type,
            passData: {
              ...obj
            }

          }
          this.$emit("confirmManualDisaccount", data)
        } else {
          uni.showToast({
            duration: 2000,
            title: "请输入正确的数字",
            icon: 'none'
          })
        }

      },
      clickDisaccountTag(item) {
        this.disaccountTag = item;
      },
      cut() {
        if (`${this.disaccountNumber}`.length > 0) {
          let str = `${this.disaccountNumber}`;
          this.disaccountNumber = str.substr(0, str.length - 1);
        }
      },
      handleNumberFn(item) {
        console.log(item);
        if (item.value == 'not') {
          return;
        }
        if (item.name.indexOf("%") != -1) {
          this.disaccountNumber = item.value;
        } else {
          let val = ''
          if (this.type == 'disaccount') {
            // 打折
            val = Number(`${this.disaccountNumber}${item.value}`);
            if (val > 100) {
              val = 100
              uni.showToast({
                title: '折扣不能大于100%!',
                icon: "none"
              })
            } else if (val <= 0) {
              val = 0
            }
          } else {
            // 减免
            // if(this.disaccountNumber&&parseInt(this.disaccountNumber)!==Number(this.disaccountNumber)){
            //   return
            // }
            const str = `${this.disaccountNumber}`
            if (item.value === '.') {
              if (str && str.indexOf('.') !== -1) {
                return
              }
            }

            console.log(str.split('.'));

            if (str && str.indexOf('.') !== -1 && str.split('.')[1] && str.split('.')[1].length >= 2) {
              return
            }

            val = `${this.disaccountNumber}${item.value}`;
            if (item.value !== '.') {
              val = Number(val)
            } else {}
            console.log(val);
            if (val > this.billResult?._order_amount) {
              // uni.showToast({
              //   title: '减免金额不能超出应付金额!',
              //   icon: "none"
              // })
              // val = this.billResult._order_amount
            } else if (val <= 0) {
              val = 0
            }
          }
          this.disaccountNumber = `${val}`;
          // setTimeout(()=>{
          //   if (this.disaccountNumber > this.billResult?._order_amount) {
          //     uni.showToast({
          //       title: '减免金额不能超出应付金额!',
          //       icon: "none"
          //     })
          //     this.disaccountNumber = this.billResult._order_amount
          //   }
          // },1000)
        }
      },
      getTime(date) {
        let filterDate = function(date) {
          if (date < 10) {
            return `0${date}`
          } else {
            return date;
          }
        }

        let year = date.getFullYear();
        let month = filterDate(date.getMonth());
        let dates = filterDate(date.getDate());
        let Hour = filterDate(date.getHours());
        let minutes = filterDate(date.getMinutes());
        let seconds = filterDate(date.getSeconds());

        return `${year}-${month}-${dates} ${Hour}:${minutes}:${seconds}`;
      },
      getList() {
        const url = `/retail/select/srvretail_discount_reason_select`;

        const req = {
          "serviceName": "srvretail_discount_reason_select",
          "colNames": ["*"],
          "condition": [],
          "order": [],
          "draft": false,

        }


        this.$http.post(url, req).then(res => {
          if (res?.data?.state === 'SUCCESS') {
            this.list = res.data.data;
          }

          uni.hideLoading()
        }).catch(_ => {
          uni.hideLoading()
        })
      }

    },
    created() {
      this.getList()
    }


  }
</script>

<style lang="scss" scoped>
  .remark-view {
    display: flex;
    flex-direction: column;

    .pop-content {
      flex: 1;
      overflow: hidden;

      .u-input {
        font-size: 2.4rem;

        ::v-deep .uni-input-wrapper {
          font-size: 2.4rem;
        }
      }
    }
  }

  .number-type {
    border: 1px solid #38C09E;
    border-radius: 1rem;
    flex: 1;
    height: 20px;
    margin-right: 3rem;
    padding: 0 2.4rem;
    font-size: 2.4rem;
  }

  .delete-icon {
    width: 9rem;
    height: 9rem;
  }

  .noMargin {
    margin-right: 0px !important;
  }

  .noMarginBottom {
    margin-bottom: 0px !important;

  }

  .green {
    background: rgba(56, 192, 158, 1);
    color: white;
  }

  .fake-button {
    font-size: 2.7rem;
  }

  @media only screen and (min-width: 1402px) and (max-width:1920px) {
    .fake-button {
      display: flex;

      justify-content: space-between;

      align-items: center;
      border-radius: 3px;
      margin-right: 1rem;
      margin-bottom: 1rem;
      // width: 12.75rem;
      height: 4rem;
      justify-content: center;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(229, 229, 229, 1);
    }




  }

  .bottom-button {
    display: flex;
    justify-content: space-between;
    font-size: 2rem;
    align-items: center;
    margin-right: 1rem;
    margin-bottom: 1rem;
    padding: 0 2rem;
    border-radius: 1rem;
    height: 5rem;
    justify-content: center;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(229, 229, 229, 1);

    &:hover,
    &.isActive {

      background: rgba(222, 242, 234, 1);

      border: 1px solid rgba(56, 192, 158, 1);


    }
  }


  @media only screen and (min-width: 905px) and (max-width: 1420px) {
    .fake-button {
      display: flex;

      justify-content: space-between;

      align-items: center;
      border-radius: 3px;
      margin-right: 1rem;
      margin-bottom: 1rem;
      // width: 17.75rem;
      height: 6rem;
      justify-content: center;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(229, 229, 229, 1);
    }


  }


  @media only screen and (min-width: 609px) and (max-width: 905px) {
    .fake-button {
      display: flex;

      justify-content: space-between;

      align-items: center;
      border-radius: 3px;
      margin-right: 2rem;
      margin-bottom: 2rem;
      // width: 25.75rem;
      height: 6rem;
      justify-content: center;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(229, 229, 229, 1);
    }

  }


  @media only screen and (max-width: 609px) {
    .fake-button {
      display: flex;

      justify-content: space-between;

      align-items: center;
      border-radius: 3px;
      margin-right: 2rem;
      margin-bottom: 2rem;


      // width: 31.75rem;
      height: 6rem;
      justify-content: center;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(229, 229, 229, 1);
    }
  }

  .fake-button {
    &:active {
      transform: translate(1px, 1px);
      opacity: 0.8;
      background: rgba(222, 242, 234, 1);
      border: 1px solid rgba(56, 192, 158, 1);
    }

    // &:hover {

    //   background: rgba(222, 242, 234, 1);

    //   border: 1px solid rgba(56, 192, 158, 1);


    // }
  }

  .fake-button-top {
    display: inline-flex;
    align-items: center;
    border-radius: 0.6rem;
    font-size: 1.4rem;
    align-items: center;
    padding: .5rem 1.5rem;
    cursor: pointer;
    border-radius: .5rem;
    justify-content: center;

    &.first {
      margin-right: 1rem;
    }

  }


  .pop-content {
    box-sizing: border-box;
    min-width: 60rem;
    padding: 1.5rem 3rem;
  }

  .submit-button {
    border-radius: 4px;
    background: #38c09e;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    align-items: center;
    justify-content: center;
    color: white;

    height: 6.5rem;
    font-size: 3.2rem;

    align-items: center;
    cursor: pointer;
  }

  .delete-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #e5e5e5;
    align-items: center;
    cursor: pointer;
    font-size: 2.4rem;

  }


  .title-row {
    font-size: 2.3rem;
    font-weight: 800;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }


  .bottom-content {
    display: flex;
    flex-wrap: wrap;




    .button-row {
      width: 100%;
      border-radius: 0.5rem;
      border: 1px solid #38c09e;
      padding: 1.1rem 1.1em;
      display: flex;
      flex: 1;
      justify-content: space-between;

    }

    .right {
      display: flex;
      font-size: 2rem;
      align-items: center;

    }


  }

  .button-content {
    display: flex;
    width: 100%;
    margin-bottom: 2rem;
  }


  .button-content-cal {
    display: flex;
    width: 100%;

    .button-row {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

  }

  .disaccountText {
    margin-bottom: 2rem;
    color: #a6a6a6;
    font-size: 2.3rem;
    margin-top: 2rem;
  }

  .red {
    color: rgba(255, 87, 51, 1);
  }
</style>
